<template>
  <view class="submission-page-container" :class="{ 'dark-mode': isDarkMode }">
    <!-- 使用全局NavBar组件 -->
    <nav-bar @theme-change="onThemeChange"></nav-bar>
    
    <!-- 提交列表内容 -->
    <view class="content-wrapper">
      <!-- 筛选工具栏 -->
      <view class="filter-toolbar">
        <view class="search-bar">
          <text class="iconfont icon-search"></text>
          <input type="text" v-model="searchQuery" placeholder="搜索题号、标题或用户" @input="searchSubmissions"/>
        </view>
        
        <view class="filters">
          <picker mode="selector" :range="statusOptions" :value="statusFilterIndex" @change="changeStatusFilter">
            <view class="filter-item">
              <text>{{ statusOptions[statusFilterIndex] || '状态' }}</text>
              <text class="dropdown-arrow">▼</text>
            </view>
          </picker>
          
          <picker mode="selector" :range="languageOptions" :value="languageFilterIndex" @change="changeLanguageFilter">
            <view class="filter-item">
              <text>{{ languageOptions[languageFilterIndex] || '语言' }}</text>
              <text class="dropdown-arrow">▼</text>
            </view>
          </picker>
          
          <view class="filter-item" @click="toggleOnlyMine">
            <checkbox :checked="onlyMine" style="transform: scale(0.8);" />
            <text>只看我的</text>
          </view>
        </view>
      </view>

      <!-- 提交列表 -->
      <view class="submission-list-container">
        <view class="submission-list-header">
          <view class="sub-col sub-id">ID</view>
          <view class="sub-col sub-user">用户</view>
          <view class="sub-col sub-problem">题目</view>
          <view class="sub-col sub-status">状态</view>
          <view class="sub-col sub-time-used">耗时</view>
          <view class="sub-col sub-memory-used">内存</view>
          <view class="sub-col sub-language">语言</view>
          <view class="sub-col sub-time">提交时间</view>
        </view>
        
        <scroll-view scroll-y class="submission-list-body" @scrolltolower="loadMoreSubmissions">
          <view 
            v-for="(submission, index) in filteredSubmissions" 
            :key="submission.id" 
            class="submission-item"
            @click="viewSubmissionDetail(submission.id)"
          >
            <view class="sub-col sub-id">#{{ submission.id }}</view>
            <view class="sub-col sub-user">
              <image class="user-mini-avatar" :src="submission.userAvatar" mode="aspectFill"></image>
              <text>{{ submission.username }}</text>
            </view>
            <view class="sub-col sub-problem">{{ submission.problemId }}. {{ submission.problemTitle }}</view>
            <view class="sub-col sub-status" :class="getStatusClass(submission.status)">
              {{ submission.status }}
            </view>
            <view class="sub-col sub-time-used">{{ submission.timeUsed }} ms</view>
            <view class="sub-col sub-memory-used">{{ submission.memoryUsed }} KB</view>
            <view class="sub-col sub-language">{{ submission.language }}</view>
            <view class="sub-col sub-time">{{ submission.time }}</view>
          </view>
          
          <view v-if="isLoading" class="loading-indicator">
            <text>加载中...</text>
          </view>
          
          <view v-if="!isLoading && filteredSubmissions.length === 0" class="empty-indicator">
            <text>暂无提交记录</text>
          </view>
        </scroll-view>
      </view>
      
      <!-- 提交详情模态框 -->
      <view v-if="showSubmissionModal" class="submission-modal-overlay" @click="closeSubmissionModal">
        <view class="submission-modal" @click.stop>
          <view class="modal-header">
            <view class="modal-title">
              提交详情 #{{ currentSubmission.id }} - 
              <text>{{ currentSubmission.problemId }}. {{ currentSubmission.problemTitle }}</text>
            </view>
            <view class="modal-close" @click="closeSubmissionModal">×</view>
          </view>
          
          <view class="modal-content">
            <view class="submission-info">
              <view class="submission-status" :class="getStatusClass(currentSubmission.status)">
                {{ currentSubmission.status }}
              </view>
              <view class="submission-meta">
                <view class="meta-item">
                  <text class="meta-label">用户:</text>
                  <text>{{ currentSubmission.username }}</text>
                </view>
                <view class="meta-item">
                  <text class="meta-label">提交时间:</text>
                  <text>{{ currentSubmission.time }}</text>
                </view>
                <view class="meta-item">
                  <text class="meta-label">语言:</text>
                  <text>{{ currentSubmission.language }}</text>
                </view>
                <view class="meta-item">
                  <text class="meta-label">执行时间:</text>
                  <text>{{ currentSubmission.timeUsed }} ms</text>
                </view>
                <view class="meta-item">
                  <text class="meta-label">内存占用:</text>
                  <text>{{ currentSubmission.memoryUsed }} KB</text>
                </view>
              </view>
            </view>
            
            <!-- 如果未通过，显示测试点通过情况 -->
            <view v-if="!isAccepted(currentSubmission.status)" class="test-cases-summary">
              <view class="test-cases-header">测试点通过情况</view>
              <view class="test-cases-progress">
                <view class="progress-bar">
                  <view 
                    class="progress-fill" 
                    :style="{width: (currentSubmission.passedCases / currentSubmission.totalCases * 100) + '%'}"
                  ></view>
                </view>
                <text class="progress-text">
                  {{ currentSubmission.passedCases }}/{{ currentSubmission.totalCases }}
                </text>
              </view>
              
              <view class="test-cases-list">
                <view 
                  v-for="(testCase, index) in currentSubmission.testCases" 
                  :key="index"
                  class="test-case-item"
                  :class="{'passed': testCase.passed}"
                >
                  <text class="case-number">测试点 {{ index + 1 }}</text>
                  <text class="case-status">{{ testCase.passed ? '通过' : '失败' }}</text>
                  <text v-if="!testCase.passed" class="case-reason">{{ testCase.reason }}</text>
                </view>
              </view>
            </view>
            
            <!-- 提交的代码 -->
            <view class="submission-code">
              <view class="code-header">
                <text>提交的代码</text>
                <view class="code-actions">
                  <button class="code-action-btn" @click="copyCode">复制</button>
                </view>
              </view>
              <view class="code-container">
                <pre><code>{{ currentSubmission.code }}</code></pre>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import NavBar from '@/components/NavBar.vue';

export default {
  components: {
    NavBar
  },
  
  data() {
    return {
      isDarkMode: false,
      showUserMenu: false,
      userAvatar: 'https://randomuser.me/api/portraits/men/32.jpg',
      searchQuery: '',
      
      // 筛选选项
      statusOptions: ['全部状态', 'Accepted', 'Wrong Answer', 'Time Limit Exceeded', 'Memory Limit Exceeded', 'Runtime Error', 'Compilation Error'],
      statusFilterIndex: 0,
      languageOptions: ['全部语言', 'C++', 'Java', 'Python', 'JavaScript', 'Go'],
      languageFilterIndex: 0,
      onlyMine: false,
      
      // 提交记录数据
      submissions: [],
      filteredSubmissions: [],
      isLoading: true,
      page: 1,
      pageSize: 20,
      
      // 模态框
      showSubmissionModal: false,
      currentSubmission: null
    };
  },
  
  onLoad() {
    // 检查主题设置
    const darkMode = uni.getStorageSync('darkMode');
    this.isDarkMode = darkMode === 'true';
    
    // 监听全局主题变更事件
    uni.$on('theme-changed', (isDark) => {
      this.isDarkMode = isDark;
    });
    
    // 加载提交记录
    this.loadSubmissions();
  },
  
  onUnload() {
    // 移除事件监听
    uni.$off('theme-changed');
  },
  
  onShow() {
    // 通知导航栏当前页面
    const currentPath = '/' + this.getPageRoute();
    uni.$emit('page-changed', currentPath);
  },
  
  methods: {
    onThemeChange(isDark) {
      this.isDarkMode = isDark;
    },
    
    goBack() {
      uni.navigateBack();
    },
    
    navigateTo(url) {
      uni.navigateTo({ url });
      this.showUserMenu = false;
    },
    
    toggleUserMenu() {
      this.showUserMenu = !this.showUserMenu;
    },
    
    logout() {
      // 实际项目中这里应该调用登出API
      uni.showToast({
        title: '退出登录',
        icon: 'success'
      });
      
      // 跳转到登录页
      setTimeout(() => {
        uni.reLaunch({
          url: '/pages/login/index'
        });
      }, 1500);
    },
    
    // 提交记录相关方法
    loadSubmissions() {
      this.isLoading = true;
      
      // 模拟API请求延迟
      setTimeout(() => {
        // 生成模拟数据
        const newSubmissions = this.generateMockSubmissions();
        this.submissions = [...this.submissions, ...newSubmissions];
        this.applyFilters();
        this.isLoading = false;
      }, 800);
    },
    
    loadMoreSubmissions() {
      if (!this.isLoading) {
        this.page++;
        this.loadSubmissions();
      }
    },
    
    generateMockSubmissions() {
      // 生成模拟的提交记录数据
      const statuses = ['Accepted', 'Wrong Answer', 'Time Limit Exceeded', 'Runtime Error', 'Compilation Error'];
      const languages = ['C++', 'Java', 'Python', 'JavaScript', 'Go'];
      
      return Array(this.pageSize).fill().map((_, i) => {
        const id = this.submissions.length + i + 1;
        const isAccepted = Math.random() > 0.4;
        const status = isAccepted ? 'Accepted' : statuses[Math.floor(Math.random() * (statuses.length - 1)) + 1];
        
        return {
          id,
          username: `user_${Math.floor(Math.random() * 1000)}`,
          userAvatar: `https://randomuser.me/api/portraits/${Math.random() > 0.5 ? 'men' : 'women'}/${Math.floor(Math.random() * 70)}.jpg`,
          problemId: Math.floor(Math.random() * 2000) + 1,
          problemTitle: `${['求和问题', '二分查找', '动态规划', '图论问题', '字符串处理'][Math.floor(Math.random() * 5)]}`,
          status,
          timeUsed: Math.floor(Math.random() * 1000) + 10,
          memoryUsed: Math.floor(Math.random() * 50000) + 1000,
          language: languages[Math.floor(Math.random() * languages.length)],
          time: this.getRandomDate(),
          code: this.getRandomCode(),
          passedCases: status === 'Accepted' ? 10 : Math.floor(Math.random() * 9) + 1,
          totalCases: 10
        };
      });
    },
    
    // 筛选相关方法
    searchSubmissions() {
      this.applyFilters();
    },
    
    changeStatusFilter(e) {
      this.statusFilterIndex = e.detail.value;
      this.applyFilters();
    },
    
    changeLanguageFilter(e) {
      this.languageFilterIndex = e.detail.value;
      this.applyFilters();
    },
    
    toggleOnlyMine() {
      this.onlyMine = !this.onlyMine;
      this.applyFilters();
    },
    
    applyFilters() {
      let result = [...this.submissions];
      
      // 应用搜索查询
      if (this.searchQuery.trim()) {
        const query = this.searchQuery.toLowerCase();
        result = result.filter(s => 
          s.problemId.toString().includes(query) ||
          s.problemTitle.toLowerCase().includes(query) ||
          s.username.toLowerCase().includes(query)
        );
      }
      
      // 应用状态筛选
      if (this.statusFilterIndex > 0) {
        const statusFilter = this.statusOptions[this.statusFilterIndex];
        result = result.filter(s => s.status === statusFilter);
      }
      
      // 应用语言筛选
      if (this.languageFilterIndex > 0) {
        const languageFilter = this.languageOptions[this.languageFilterIndex];
        result = result.filter(s => s.language === languageFilter);
      }
      
      // 应用"只看我的"筛选
      if (this.onlyMine) {
        // 实际项目中应该与当前用户ID比较
        result = result.filter(s => s.username === 'user_123');
      }
      
      this.filteredSubmissions = result;
    },
    
    // 提交详情相关方法
    viewSubmissionDetail(submissionId) {
      const submission = this.submissions.find(s => s.id === submissionId);
      
      if (submission) {
        // 为测试生成随机测试点通过情况
        const testCases = Array(10).fill().map((_, i) => {
          const passed = submission.status === 'Accepted' || Math.random() > 0.5;
          return {
            passed,
            reason: passed ? '' : ['时间超限', '运行错误', '答案错误', '内存超限'][Math.floor(Math.random() * 4)]
          };
        });
        
        this.currentSubmission = {
          ...submission,
          testCases
        };
        
        this.showSubmissionModal = true;
      }
    },
    
    closeSubmissionModal() {
      this.showSubmissionModal = false;
      this.currentSubmission = null;
    },
    
    copyCode() {
      if (this.currentSubmission && this.currentSubmission.code) {
        uni.setClipboardData({
          data: this.currentSubmission.code,
          success: () => {
            uni.showToast({
              title: '代码已复制',
              icon: 'success'
            });
          }
        });
      }
    },
    
    // 辅助方法
    getStatusClass(status) {
      const statusMap = {
        'Accepted': 'status-accepted',
        'Wrong Answer': 'status-wrong-answer',
        'Time Limit Exceeded': 'status-time-limit-exceeded',
        'Memory Limit Exceeded': 'status-memory-limit-exceeded',
        'Runtime Error': 'status-runtime-error',
        'Compilation Error': 'status-compilation-error'
      };
      
      return statusMap[status] || '';
    },
    
    isAccepted(status) {
      return status === 'Accepted';
    },
    
    getRandomDate() {
      const date = new Date();
      date.setDate(date.getDate() - Math.floor(Math.random() * 30));
      return date.toLocaleString();
    },
    
    getRandomCode() {
      // 根据语言返回不同样式的代码
      const codeSamples = {
        'C++': `#include <iostream>\nusing namespace std;\n\nint main() {\n  int n;\n  cin >> n;\n  cout << n + 1 << endl;\n  return 0;\n}`,
        'Java': `import java.util.Scanner;\n\npublic class Main {\n  public static void main(String[] args) {\n    Scanner sc = new Scanner(System.in);\n    int n = sc.nextInt();\n    System.out.println(n + 1);\n  }\n}`,
        'Python': `n = int(input())\nprint(n + 1)`,
        'JavaScript': `const readline = require('readline');\nconst rl = readline.createInterface({\n  input: process.stdin,\n  output: process.stdout\n});\n\nrl.on('line', (line) => {\n  const n = parseInt(line.trim());\n  console.log(n + 1);\n});`,
        'Go': `package main\n\nimport "fmt"\n\nfunc main() {\n  var n int\n  fmt.Scan(&n)\n  fmt.Println(n + 1)\n}`
      };
      
      return this.currentSubmission ? 
        codeSamples[this.currentSubmission.language] || codeSamples['C++'] :
        codeSamples['C++'];
    },
    
    getPageRoute() {
      const pages = getCurrentPages();
      if (pages.length > 0) {
        return pages[pages.length - 1].route;
      }
      return '';
    }
  }
};
</script>

<style>
/* 添加暗黑模式基础样式 */
.submission-page-container {
  padding-top: 60px; /* 为固定导航栏留出空间 */
  min-height: 100vh;
  background-color: #ffffff;
}

.submission-page-container.dark-mode {
  background-color: #121212;
  color: #e0e0e0;
}

.content-wrapper {
  padding: 20px;
}

/* 导航栏样式 */
.custom-navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 50px;
  padding: 0 16px;
  background-color: #fff;
  border-bottom: 1px solid #eaeaea;
  position: relative;
  z-index: 10;
}

.dark-mode .custom-navbar {
  background-color: #1e1e1e;
  border-bottom-color: #333;
}

.navbar-left, .navbar-right {
  display: flex;
  align-items: center;
}

.back-button {
  display: flex;
  align-items: center;
  margin-right: 15px;
  cursor: pointer;
}

.page-title {
  font-size: 18px;
  font-weight: 500;
}

.navbar-action {
  display: flex;
  align-items: center;
  margin-left: 15px;
  cursor: pointer;
}

.theme-icon {
  margin-right: 5px;
}

.user-avatar-container {
  position: relative;
  margin-left: 15px;
}

.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
}

.user-menu {
  position: absolute;
  top: 40px;
  right: 0;
  width: 120px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  z-index: 100;
}

.dark-mode .user-menu {
  background-color: #252525;
  box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.menu-item {
  padding: 10px 15px;
  cursor: pointer;
}

.menu-item:hover {
  background-color: #f5f5f9;
}

.dark-mode .menu-item:hover {
  background-color: #333;
}

/* 筛选工具栏 */
.filter-toolbar {
  display: flex;
  padding: 10px 16px;
  background-color: #f9f9f9;
  border-bottom: 1px solid #eaeaea;
  flex-wrap: wrap;
  gap: 10px;
}

.dark-mode .filter-toolbar {
  background-color: #1a1a1a;
  border-bottom-color: #333;
}

.search-bar {
  display: flex;
  align-items: center;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 6px 10px;
  flex: 1;
  min-width: 200px;
}

.dark-mode .search-bar {
  background-color: #333;
  border-color: #444;
}

.search-bar input {
  margin-left: 8px;
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  color: inherit;
}

.filters {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.filter-item {
  display: flex;
  align-items: center;
  gap: 5px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 6px 10px;
  cursor: pointer;
}

.dark-mode .filter-item {
  background-color: #333;
  border-color: #444;
}

.dropdown-arrow {
  font-size: 10px;
  opacity: 0.7;
}

/* 提交列表 */
.submission-list-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.submission-list-header {
  display: flex;
  padding: 12px 16px;
  background-color: #f5f5f5;
  border-bottom: 1px solid #eaeaea;
  font-weight: 500;
}

.dark-mode .submission-list-header {
  background-color: #252525;
  border-bottom-color: #333;
}

.submission-list-body {
  flex: 1;
  overflow-y: auto;
}

.submission-item {
  display: flex;
  padding: 12px 16px;
  border-bottom: 1px solid #eaeaea;
  cursor: pointer;
  transition: background-color 0.2s;
}

.dark-mode .submission-item {
  border-bottom-color: #333;
}

.submission-item:hover {
  background-color: #f9f9f9;
}

.dark-mode .submission-item:hover {
  background-color: #1e1e1e;
}

.sub-col {
  padding: 0 8px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sub-id {
  width: 8%;
}

.sub-user {
  width: 12%;
  display: flex;
  align-items: center;
  gap: 6px;
}

.user-mini-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
}

.sub-problem {
  width: 20%;
}

.sub-status {
  width: 14%;
  font-weight: 500;
}

.sub-time-used, .sub-memory-used {
  width: 10%;
  text-align: right;
}

.sub-language {
  width: 10%;
}

.sub-time {
  width: 16%;
}

/* 加载和空状态 */
.loading-indicator, .empty-indicator {
  display: flex;
  justify-content: center;
  padding: 20px 0;
  color: #999;
}

/* 状态颜色 */
.status-accepted {
  color: #28a745;
}

.status-wrong-answer {
  color: #dc3545;
}

.status-time-limit-exceeded {
  color: #fd7e14;
}

.status-runtime-error {
  color: #6f42c1;
}

.status-compilation-error {
  color: #6c757d;
}

.dark-mode .status-accepted {
  color: #4caf50;
}

.dark-mode .status-wrong-answer {
  color: #f44336;
}

.dark-mode .status-time-limit-exceeded {
  color: #ff9800;
}

.dark-mode .status-runtime-error {
  color: #9c27b0;
}

.dark-mode .status-compilation-error {
  color: #9e9e9e;
}

/* 提交详情模态框 */
.submission-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
}

.submission-modal {
  width: 80%;
  max-width: 900px;
  max-height: 80vh;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
}

.dark-mode .submission-modal {
  background-color: #252525;
  color: #e0e0e0;
}

.modal-header {
  padding: 16px 20px;
  border-bottom: 1px solid #eaeaea;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dark-mode .modal-header {
  border-bottom-color: #444;
}

.modal-title {
  font-size: 18px;
  font-weight: 500;
}

.modal-close {
  font-size: 24px;
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.modal-close:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.dark-mode .modal-close:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.modal-content {
  padding: 20px;
  overflow-y: auto;
  max-height: calc(80vh - 60px);
}

/* 提交状态和元信息 */
.submission-info {
  display: flex;
  align-items: flex-start;
  margin-bottom: 20px;
}

.submission-status {
  padding: 6px 12px;
  border-radius: 4px;
  font-weight: 500;
  margin-right: 16px;
}

.submission-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
}

.meta-item {
  display: flex;
  align-items: center;
}

.meta-label {
  color: #666;
  margin-right: 6px;
  font-size: 14px;
}

.dark-mode .meta-label {
  color: #aaa;
}

/* 测试点通过情况 */
.test-cases-summary {
  margin-bottom: 24px;
  padding: 16px;
  background-color: #f5f5f5;
  border-radius: 6px;
}

.dark-mode .test-cases-summary {
  background-color: #333;
}

.test-cases-header {
  font-weight: 500;
  margin-bottom: 12px;
}

.test-cases-progress {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

.progress-bar {
  flex: 1;
  height: 8px;
  background-color: #e0e0e0;
  border-radius: 4px;
  overflow: hidden;
  margin-right: 10px;
}

.dark-mode .progress-bar {
  background-color: #444;
}

.progress-fill {
  height: 100%;
  background-color: #4CAF50;
  border-radius: 4px;
}

.progress-text {
  font-size: 14px;
  font-weight: 500;
}

.test-cases-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}

.test-case-item {
  padding: 10px;
  border-radius: 4px;
  background-color: #fff;
  border: 1px solid #e0e0e0;
  display: flex;
  flex-direction: column;
}

.dark-mode .test-case-item {
  background-color: #2a2a2a;
  border-color: #444;
}

.test-case-item.passed {
  border-color: #4CAF50;
}

.dark-mode .test-case-item.passed {
  border-color: #2E7D32;
}

.case-number {
  font-weight: 500;
  font-size: 14px;
  margin-bottom: 4px;
}

.case-status {
  color: #F44336;
  font-size: 13px;
}

.test-case-item.passed .case-status {
  color: #4CAF50;
}

.case-reason {
  font-size: 12px;
  color: #757575;
  margin-top: 4px;
}

.dark-mode .case-reason {
  color: #bbb;
}

/* 代码显示 */
.submission-code {
  border: 1px solid #eaeaea;
  border-radius: 6px;
  overflow: hidden;
}

.dark-mode .submission-code {
  border-color: #444;
}

.code-header {
  padding: 10px 16px;
  background-color: #f5f5f5;
  border-bottom: 1px solid #eaeaea;
  font-weight: 500;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dark-mode .code-header {
  background-color: #333;
  border-bottom-color: #444;
}

.code-actions {
  display: flex;
  gap: 8px;
}

.code-action-btn {
  font-size: 12px;
  padding: 4px 8px;
  background-color: #e0e0e0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.dark-mode .code-action-btn {
  background-color: #454545;
  color: #e0e0e0;
}

.code-container {
  padding: 0;
  max-height: 400px;
  overflow-y: auto;
  background-color: #fafafa;
}

.dark-mode .code-container {
  background-color: #1e1e1e;
}

.code-container pre {
  margin: 0;
  padding: 16px;
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: 14px;
  line-height: 1.5;
  tab-size: 4;
}

.dark-mode .code-container pre {
  color: #e0e0e0;
}
</style> 